<template>
  <PageWrapper
    title="基础表单"
    contentBackground
    content=" 表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
    contentClass="p-4"
  >
    <BasicForm @register="register" />
  </PageWrapper>
</template>
<script lang="ts">
import { BasicForm, useForm } from '@/components/form'
import { defineComponent } from 'vue'
import { schemas } from './data'
import { useMessage } from '@/hooks/web/useMessage'
import { PageWrapper } from '@/components/page'

export default defineComponent({
  name: 'FormBasicPage',
  components: { BasicForm, PageWrapper },
  setup() {
    const { createMessage } = useMessage()
    const [register, { validate, setProps }] = useForm({
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 10,
      },
      schemas: schemas,
      actionColOptions: {
        offset: 8,
        span: 12,
      },
      submitButtonOptions: {
        text: '提交',
      },
      submitFunc: customSubmitFunc,
    })

    async function customSubmitFunc() {
      try {
        await validate()
        setProps({
          submitButtonOptions: {
            loading: true,
          },
        })
        setTimeout(() => {
          setProps({
            submitButtonOptions: {
              loading: false,
            },
          })
          createMessage.success('提交成功！')
        }, 2000)
      } catch (error) {}
    }

    return { register }
  },
})
</script>
<style lang="less" scoped>
.form-wrap {
  padding: 24px;
  background-color: @component-background;
}
</style>
